<template>
	<view class="prepare" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar></nav-bar>
		<view class="container">
			<view class="loading-box">
				<view class="base_loading">
					<view
						class="round round1"
						:class="{ 'round-animation': dots[0] }"
					></view>
					<view
						class="round round2"
						:class="{ 'round-animation': dots[1] }"
					></view>
					<view
						class="round round3"
						:class="{ 'round-animation': dots[2] }"
					></view>
					<view
						class="round round4"
						:class="{ 'round-animation': dots[3] }"
					></view>
					<view
						class="round round5"
						:class="{ 'round-animation': dots[4] }"
					></view>
					<view
						class="round round6"
						:class="{ 'round-animation': dots[5] }"
					></view>
					<view
						class="round round7"
						:class="{ 'round-animation': dots[6] }"
					></view>
					<view
						class="round round8"
						:class="{ 'round-animation': dots[7] }"
					></view>
				</view>
				<view class="title">
					仪器准备中
					<view class="loading">
						<view class="dian"></view>
						<view class="dian"></view>
						<view class="dian"></view>
					</view>
				</view>
			</view>
			<view class="hint">
				1.请保持手机端蓝牙开启
				<br />
				2.请保持仪器处于开机状态
				<br />
				3.请保持仪器距离此手机{{ `<1m` }} <br />
				4.此界面最多停留30s
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { getExhaleTime } from '@/api/index.js'
import { ooo2, ooo3, ooo8 } from '@/api/bleApi.js'
const BLE = require('@/utils/ble.js')
export default {
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			differentTime: undefined, // 当前测量类型时长
			params: undefined,
			noting: undefined,
			loading: undefined,
			timer: null,
            timeout: null,
			dots: []
		}
	},
	computed: {
		...mapState({
			ble: (state) => state.ble, // 实时蓝牙全局状态
			userInfo: (state) => state.userInfo
		})
	},
	watch: {
		'ble.state': {
			handler(newVal, oldVal) {
				if (newVal == -1 && oldVal == 0) {
					clearTimeout(this.noting)
					if (this.params.tag == 9) {
						uni.redirectTo({
							url: '/pagesB/login/device/connect/index'
						})
					} else {
						uni.switchTab({
							url: '/pages/health/index'
						})
					}
				}
			}
		},
		'ble.measureState': {
			handler(newVal, oldVal) {
				if (newVal == -1) {
					clearTimeout(this.noting)
					uni.redirectTo({
						url: `/pagesA/health/device/measure/main?params=${JSON.stringify(
							this.params
						)}&differentTime=${this.differentTime}`
					})
				} else if (newVal == -2) {
					console.log('仪器准备中')
				}
			}
		}
	},
	onLoad(OPTIONS) {
		//loading 动画延迟开始属性苹果手机有bug要用js实现延迟
		this.timeout = setInterval(() => {
			this.dots.push(true)
			if (this.dots.length == 8) {
				clearInterval(this.timeout)
			}
		}, 200)
		this.params = JSON.parse(OPTIONS.params)
		if (this.ble.state == 0) {
			// 需要判断此时是否处于链接状态下 如果不在连接中那么发送指令就无效了
			this.getMaxTime()
			this.noting = setTimeout(() => {
				if (this.ble.measureState != -1) {
					uni.showModal({
						title: '提示',
						content: '仪器准备时间过长,请重新进入',
						showCancel: false,
						confirmText: '确定',
						success: (errModal) => {
							if (errModal.confirm) {
								if (this.params.tag == 9) {
									uni.redirectTo({
										url: '/pagesB/login/device/connect/index'
									})
								} else {
									uni.switchTab({
										url: '/pages/health/index'
									})
								}
							}
						}
					})
				}
			}, 31000)
		} else {
			if (this.params.tag == 9) {
				uni.redirectTo({
					url: '/pagesB/login/device/connect/index'
				})
			} else {
				uni.switchTab({
					url: '/pages/health/index'
				})
			}
		}
	},
	onUnload() {
		clearInterval(this.timeout)
		clearInterval(this.loading)
		clearTimeout(this.timer)
		clearTimeout(this.noting)
		if (this.ble.measureState != -1) {
			ooo8()
			this.$store.commit('changeBleMeasureState', 2)
		}
	},
	methods: {
		close() {
			if (this.ble.measureState == -2) {
				clearTimeout(this.noting)
				if (this.params.tag == 9) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/health/index'
					})
				}
			}
		},
		// 获取是否应用测量不同时间
		async getMaxTime() {
			let params = {
				userId: this.userId
			}
			try {
				const res = await getExhaleTime(params)
				if (res.code == 200) {
					this.differentTime = res.data == 2 ? null : res.data
				}
				const o2Res = await ooo2()
				if (o2Res.data[0] == 0) {
					this.timer = setTimeout(async () => {
						const o3Res = await ooo3()
						if (o3Res.data[0] == 0)
							this.$store.commit('changeBleMeasureState', -1)
					}, 5000)
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.prepare {
	padding: 0 46rpx 0;

	.container {
		margin-top: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.m-r {
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}

		.title {
			margin-top: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1f2434;
			line-height: 46rpx;
			text-align: left;
			display: flex;
			justify-content: center;
			align-items: center;
			.loading {
				display: flex;
				gap: 5px;
				margin-left: 10rpx;
				margin-top: 6rpx;
			}
			.loading .dian {
				display: inline-block;
				width: 4px;
				height: 4px;
				background-color: #333;
				border-radius: 50%;
				animation: dotAnimation 1.2s infinite;
			}
			.loading .dian:nth-child(2) {
				animation-delay: 0.4s;
			}
			.loading .dian:nth-child(3) {
				animation-delay: 0.8s;
			}

			@keyframes dotAnimation {
				0%,
				100% {
					opacity: 1;
				}
				50% {
					opacity: 0.3;
				}
			}
		}
		.hint {
			width: 100%;
			background: #f3f4f7;
			margin-top: 324rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			padding: 38rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(31, 36, 52, 0.7);
			line-height: 46rpx;
			text-align: left;
		}
	}
	.loading-box {
		margin-top: 204rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.base_loading {
			margin-left: 50%;
			width: 92rpx;
			height: 92rpx;
			position: relative;
			margin-bottom: 30rpx;
		}
		.round {
			position: absolute;
			border-radius: 50%;
			background-color: #23c89e;
		}
		.round-animation {
			animation: circleRound 2.8s ease infinite;
			transform-origin: 50% 30px;
		}
		.round1 {
			// animation: circleRound 2.8s ease infinite;
			width: 16px;
			height: 16px;
			z-index: 7;
		}
		.round2 {
			// animation: circleRound 2.8s ease infinite;
			height: 14px;
			width: 14px;
			background-color: #23c89e;
			// animation-delay: 0.2s; // 动画延迟开始属性苹果手机有bug要用js实现延迟
			z-index: 6;
		}
		.round3 {
			// animation: circleRound 2.8s ease infinite;
			height: 12px;
			width: 12px;
			background-color: #23c89e;
			// animation-delay: 0.4s;
			z-index: 5;
		}
		.round4 {
			// animation: circleRound 2.8s ease infinite;
			height: 10px;
			width: 10px;
			background-color: #23c89e;
			// animation-delay: 0.6s;
			z-index: 4;
		}
		.round5 {
			// animation: circleRound 2.8s ease infinite;
			height: 8px;
			width: 8px;
			background-color: #23c89e;
			// animation-delay: 0.8s;
			z-index: 3;
		}
		.round6 {
			// animation: circleRound 2.8s ease infinite;
			height: 6px;
			width: 6px;
			background-color: #23c89e;
			// animation-delay: 1s;
			z-index: 2;
		}
		.round7 {
			// animation: circleRound 2.8s ease infinite;
			height: 5px;
			width: 5px;
			background-color: #23c89e;
			// animation-delay: 1.2s;
			z-index: 1;
		}
		.round8 {
			// animation: circleRound 2.8s ease infinite;
			height: 4px;
			width: 4px;
			background-color: #23c89e;
			// animation-delay: 1.4s;
			z-index: 1;
		}
	}
}

@keyframes circleRound {
	to {
		transform: rotate(360deg);
	}
}
</style>
